<template>
<div class="address">
      <el-button type="primary" class="addBtn" size="small" @click="toAddress">添加地址</el-button>
    <div class="addressShow">
        <el-col :span="20" v-for="(address, index) in addresses" :key="address.id" style="margin-bottom: 40px;">
         <el-descriptions  direction="vertical" :column="6" border>
         <el-descriptions-item label="收货人">{{address.name}}</el-descriptions-item>
         <el-descriptions-item label="手机号">{{address.telephone}}</el-descriptions-item>
         <el-descriptions-item label="所在城市" :span="1">{{address.city}}</el-descriptions-item>
         <el-descriptions-item label="备注"><el-tag size="small">公司</el-tag></el-descriptions-item>
         <el-descriptions-item label="收货地址">{{address.address}}</el-descriptions-item>
         <el-descriptions-item label="删除地址"><el-button type="primary" size="small" @click="delAddress(index)">删除</el-button></el-descriptions-item>
         </el-descriptions>
  </el-col>
</div>
        </div>
</template>

<script>
    export default {
        name: 'AddressView',
        data() {
      return {
       addresses:{}
      };
    },
    created(){
        this.axios.get('/api/getAddress')
        .then(res=>{
          console.log('res:',res.data.data)
          this.addresses = res.data.data
        })
    },
    methods:{
      toAddress(){
      this.$router.push({path:'/addaddress',query:{data:JSON.stringify(this.multipleSelection)}})
    },
    delAddress(index){
      let id = this.addresses[index]._id
      this.axios.defaults.headers.common['Authorization'] = localStorage['token']
      this.axios.delete('/api/delAddress',{ params: {id} })
        .then(res => {
          this.$message('删除成功！')
        })
        .catch(err => {
          this.$message('删除失败！')
        })
    },
    }
    
  }
    </script>
<style>
.addBtn{
  margin-left:8%;
}
.addressShow{
  width: 80%;
  margin-left: 10%;
  margin-top: 5%;
}
</style>